<script setup>
import { onMounted, ref, computed } from "vue"
import { useRoute } from "vue-router"
import axios from "axios"

onMounted(() => {
  let route = useRoute()
  // console.log("@@@", route.params.id)
  let id = route.params.id
  getData(id)
})
let datas = ref({})
let radio = ref({})
function getData(id) {
  axios
    .get(`http://122.112.161.135:3000/dj/program/detail?id=${id}`)
    .then((res) => {
      // console.log(res.data.program)
      datas.value = res.data.program
      console.log(datas.value)
      // console.log(datas.value.radio.name)
      radio.value = datas.value.radio
    })
}
let time = computed(() => {
  let minute = parseInt(datas.value.duration / 1000 / 60)
  let second = Math.floor((datas.value.duration / 1000) % 60)
  // console.log(minute, second)
  return minute + "分" + second + "秒"
})
</script>
<template>
  <div class="container">
    <div class="up" style="display: flex">
      <div class="left">
        <img :src="datas.coverUrl" style="width: 140px; height: 140px" />
      </div>
      <div class="right" style="margin-left: 20px">
        <div class="right-up" style="height: 70px">{{ datas.name }}</div>
        <div class="right-down">
          <span>{{ radio.name }}</span>
          <span
            style="
              display: inline-block;
              width: 70px;
              height: 30px;
              line-height: 30px;
              border: 1px solid #b5b5b5;
              border-radius: 5px;
              font-size: 12px;
              text-align: center;
              margin-left: 20px;
            "
            >订阅({{ radio.subCount }})</span
          >
        </div>
      </div>
    </div>
    <div class="down" style="margin-top: 20px">
      <a href="#"
        ><span style="background-color: #539bde; color: #fff; width: 120px"
          >播放{{ time }}</span
        ></a
      >
      <a href="#"
        ><span>点赞{{ datas.likedCount }}</span></a
      >
      <a href="#"
        ><span>评论{{ datas.commentCount }}</span></a
      >
      <a href="#"
        ><span>分享{{ datas.shareCount }}</span></a
      >
      <a href="#"><span>下载</span></a>
      <a href="#"
        ><span
          style="border: 0; background-color: #fff; width: 84px; color: #0c73c2"
          >生成外链播放器</span
        ></a
      >
    </div>
  </div>
</template>
<style scoped>
.container {
  width: 650px;
  padding-top: 20px;
  margin: 0 auto;
}
.down span {
  display: inline-block;
  font-size: 12px;
  height: 30px;
  width: 50px;
  padding: 0 5px;
  line-height: 30px;
  margin-right: 10px;
  background-color: #f3f3f3;
  color: #666666;
  border: 1px solid #aaa;
  border-radius: 5px;
  text-align: center;
}
</style>
